<template>
	<view class="page-wp">
		<view v-if="page!=1" @click="first()">首页</view>
		<view v-if="page!=1" @click="upNext()">上一页</view>
		<view v-if="item>=Psize" :class="page==item+1?'active':''" v-for="item in pages" @click="handleCurrent(item+1)">{{item+1}}</view>
		<view v-if="page!=total" @click="beNext()" >下一页</view>
		<view v-if="page!=total" @click="end()">尾页</view>
	</view>
</template>

<script>
export default{
	props:{
		total:{
			type: Number,
			default:1
		},
		pagesize:{
			type: Number,
			default:5
		},
		thisPage:{
			type: Number,
			default:1
		}
	},
	data(){
		return {
			pages:1,
			page:1,
			Psize:1,
		}
	},
	mounted() {
		this.pages=this.pagesize>=this.total?this.total:this.pagesize;
		this.page=this.thisPage;
		this.Pag();
	},
	methods:{
		handleCurrent(e){
			this.page=e;
			this.$emit('change',this.page);
			this.Pag();
		},
		first(){
			this.page=1;
			this.Psize=1;
			this.pages=this.pagesize>=this.total?this.total:this.pagesize;
			this.$emit('change',this.page);
		},
		end(){
			this.page=this.total;
			this.Psize=this.total-this.pagesize+1;
			this.pages=this.total;
			this.$emit('change',this.page);
		},
		upNext(){
			this.page-=1;
			this.$emit('change',this.page);
			this.Pag();
		},
		beNext(){
			this.page+=1;
			this.$emit('change',this.page);
			this.Pag();
		},
		Pag(){
			if(this.pagesize>this.total){return false};
			var num=Math.ceil(this.pagesize/2)-1;
			this.Psize=this.page-num>=this.total-this.pagesize+1?(this.total-this.pagesize+1):(this.page-num);
			this.pages=this.page+num>=this.total?this.total:(this.page+num);
			this.pages=this.pages<=this.pagesize?this.pagesize:this.pages;
		}
	}
}
</script>

<style>
.page-wp{
	background-color: #fff;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28upx;
	color: #303133;
	padding-bottom: 50px;
}
.page-wp>view{
	border: 1px #909399 solid;
	padding: 4upx 10upx;
	margin: 4upx;
}
.page-wp .active{
	background-color: #0062CC;
	border-color: #0062CC;
	color: #fff;
}
</style>
